import IconFont from '@/components/IconFont';
import { Button, Input, Tooltip } from 'antd'; // 假设使用 element-react 库
import { useMemo, useState } from 'react';
// import AutoTooltip from '@/components/auto-tooltip'; 

interface AIChatOperateProps {
    applicationDetails?: any;
    type: string;
    loading: boolean;
    isMobile: boolean;
    appId: string;
    chatId: string;
    sendMessage: (message: string, uploadList: any) => void;
    onOpenChatId?: () => void;
}
const AIChatOperate = ({
    applicationDetails,
    type,
    loading,
    isMobile,
    appId,
    chatId,
    sendMessage,
    onOpenChatId
}: AIChatOperateProps) => {


    const [inputValue, setInputValue] = useState('');
    const [uploadImageList, setUploadImageList] = useState([]);
    const [uploadDocumentList, setUploadDocumentList] = useState([]);
    const [uploadVideoList, setUploadVideoList] = useState([]);
    const [uploadAudioList, setUploadAudioList] = useState([]);


    const isDisabledChart = useMemo(() => {
        return !(inputValue.trim() && (appId || applicationDetails?.name));
    }, [inputValue, appId, applicationDetails]);

    
    const sendChatHandle = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
        if (!event.ctrlKey) {
            event.preventDefault();
            triggerSend();
        } else {
            setInputValue(prevValue => prevValue + '\n');
        }
    };

    const triggerSend = () => {
        if (!isDisabledChart && !loading) {
            if (inputValue.trim()) {
                sendMessage(inputValue, {
                    image_list: uploadImageList,
                    document_list: uploadDocumentList,
                    audio_list: uploadAudioList,
                    video_list: uploadVideoList
                });
                setInputValue('');
                setUploadImageList([]);
                setUploadDocumentList([]);
                setUploadAudioList([]);
                setUploadVideoList([]);
                // if (quickInputRef.current) {
                //     quickInputRef.current.style.height = '45px';
                // }
            }
        }
    }

    // useEffect(() => {
    //     const searchParams = new URLSearchParams(location.search);
    //     const question = searchParams.get('question');
    //     const mode = searchParams.get('mode');

    //     if (question) {
    //         setInputValue(decodeURIComponent(question.trim()));
    //         sendChatHandle({ preventDefault: () => {} });
    //         setTimeout(() => {
    //             searchParams.delete('question');
    //             const newSearch = searchParams.toString();
    //             const newPath = `/ui${location.pathname}${newSearch? `?${newSearch}` : ''}`;
    //             navigate(newPath, { replace: true });
    //         }, 100);
    //     }

    //     // setTimeout(() => {
    //     //     if (quickInputRef.current && mode === 'embed') {
    //     //         quickInputRef.current.style.height = '0';
    //     //     }
    //     // }, 1800);
    // }, [location, navigate]);

    const placeholder ='请输入问题，Ctrl+Enter 换行，Enter发送'

    return (
        <div className="ai-chat__operate p-16-24">
            <div className="operate-textarea">
                <div className="flex">
                    <Input.TextArea
                        value={inputValue}
                        onChange={(e) => setInputValue(e.target.value)}
                        placeholder={placeholder}
                        autoSize={{ minRows: 1, maxRows: isMobile? 4 : 10 }}
                        maxLength={100000}
                        onPressEnter={(e) => sendChatHandle(e)}
                    />

                    <div className="operate flex align-center">
                        <Button
                            className="sent-button"
                            disabled={isDisabledChart || loading}
                            onClick={triggerSend}
                        >
                            {isDisabledChart || loading? (
                                <IconFont type="icon-ios-send" />
                            ) : (
                                <span>发送</span>
                            )}
                        </Button>
                    </div>
                </div>
            </div>
            {applicationDetails?.disclaimer && (
                <div className="text-center" style={{ marginTop: '8px' }}>
                    <div style={{ fontSize: '12px' }}>
                        <Tooltip title={applicationDetails?.disclaimer_value}>
                            {applicationDetails?.disclaimer_value}
                        </Tooltip>
                    </div>
                </div>
            )}
        </div>
    );
};

export default AIChatOperate;